<template>
<el-form ref="product" :model="product" label-width="80px" style="width:70%;margin:0px auto">
  <el-form-item label="商品名" prop="name">
    <el-input v-model="product.name"></el-input>
  </el-form-item>
  <el-form-item label="主图">
        <el-upload
          class="avatar-uploader"
          action="http://api.cat-shop.penkuoer.com/api/v1/common/file_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
  <el-form-item label="价格" prop="price">
    <el-input v-model="product.price"></el-input>
  </el-form-item>
  <el-form-item label="简介" prop="descriptions">
    <el-input type="textarea" v-model="product.descriptions"></el-input>
  </el-form-item>
  <el-form-item label="库存" prop="quantity">
    <el-input v-model="product.quantity"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">修改</el-button>
    <el-button @click="FH">返回</el-button>
  </el-form-item>
</el-form>
</template>


<script>
import { edit,editGet } from '../../api/products'
export default {
  data(){
    return{
      id:"",
      product:{
        name:"",
        descriptions:"",
        quantity:"",
        price:"",
        coverImg:""
      },
      imageUrl:"2"
    }
  },
  async created(){
    this.id = this.$route.query.id
    const res = await editGet(this.id)
    // console.log(res)
    let resData = res.data
    this.product.name = resData.name
    this.product.descriptions = resData.descriptions
    this.product.quantity = resData.quantity
    this.product.price = resData.price
    this.product.coverImg = resData.coverImg.startsWith('http')?resData.coverImg:'http://api.cat-shop.penkuoer.com'+resData.coverImg
    this.imageUrl = resData.coverImg.startsWith('http')?resData.coverImg:'http://api.cat-shop.penkuoer.com'+resData.coverImg
  },
  methods:{
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.product.coverImg = res.info
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    onSubmit(){
      edit(this.id,this.product)
        this.$router.push({
        name:'user'
      })
    },
    FH(){
      this.$router.push({
        name:"user"
      })
    }
  }
}
</script>
